<template>
  <div class="com-container">
    <div class="shipin">
      <video
        data-v-088f92a8=""
        :src="videourl"
        autoplay="autoplay"
        muted="muted"
        controls="controls"
        loop="loop"
      ></video>
    </div>
    <div class="neirong">
      <div class="block">
        <a style="color: aqua">设备名称:</a>
        <el-cascader
          style="width: 150px; margin-left: 10px"
          placeholder="试试搜索：变压器"
          :options="options"
          v-model="value"
          @change="handleChange"
          filterable
          size="mini"
        ></el-cascader>
        <dv-capsule-chart :config="config" style="width: 17vw; height: 18vh" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: null, //服务器返回的数据
      config: {
        data: [
          {
            name: "电流-A",
            value: 0,
          },
          {
            name: "电压-KV",
            value: 0,
          },
          {
            name: "有功功率-KW",
            value: 0,
          },
          {
            name: "无功功率-KW",
            value: 0,
          },
          {
            name: "负荷预测-KW",
            value: 0,
          },
        ],

        showValue: true,
        // unit: "V",
      },
      options: null,
      //选择器的结果
      value: [0, 0],
      //视频监控的地址
      dizhi: "http://127.0.0.1:8000",
      videourl: "",
    };
  },
  props: ["fenqu", "moren"],
  methods: {
    //获取选择器数据
    async getData() {
      const res = await this.$http.get("equipment/area_equipment_list", {
        params: {
          area: this.fenqu,
        },
      });
      this.options = res.data;

      //this.value[1] = [this.moren];
      // console.log(this.options);
    },
    //选择器函数
    handleChange() {
      this.updateData();
    },
    //更新数据
    async updateData() {
      const res = await this.$http.get("equipment/equipment_info", {
        params: {
          name: this.value[0],
        },
      });
      this.allData = res.data;
      this.videourl = this.dizhi + this.allData.video;
      console.log(this.allData);
      this.config = {
        data: [
          {
            name: "电流-A",
            value: this.allData.electricity,
          },
          {
            name: "电压-KV",
            value: this.allData.voltage,
          },
          {
            name: "有功功率-KW",
            value: this.allData.active_power,
          },
          {
            name: "无功功率-KW",
            value: this.allData.reactive_power,
          },
          {
            name: "负荷预测-KW",
            value: this.allData.load_forecast,
          },
        ],
      };
      this.config.colors = this.config.data.map((x) => {
        if (x.value > 100) {
          return "#ff0000";
        } else if (x.value > 75) {
          return "#ff9900";
        } else {
          return "#00ff00";
        }
      });
    },
  },
  mounted() {},
  created() {
    this.getData();
    // this.updateData();
  },
};
</script>

<style lang="less" scoped>
.com-container {
  position: relative;
}
.shipin {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  //bottom: 0;
  right: 0;
  height: 38%;
  width: 98%;
  border: 1px solid #ccc;
}
.neirong {
  position: absolute;
  height: 60%;
  bottom: 0;
}
.color {
  width: 100%;
  height: 100%;

  background-color: rgb(199, 24, 24);
}
video {
  width: 100%;
  height: 100%;
}
</style>
